<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS基本语法</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            text-align: center;
        }
        .wrapper {
            margin: 30px;
            width: 450px;
            border: 1px solid red;
        }
        .big-box {
            width: 120px;
            height: 120px;
            background: #33e;
        }        
        .small-box {
            width: 50px;
            height: 50px;
            background: #9cc;
        }
        .middle-box {
            width: 100px;
            height: 100px;
            background: #99c;
        }
        .floatL {float:left;}
        .floatR {float: right;}
        .top20 {top:20px}
        .clear {clear: both;}
        .posA {position: absolute;}
        .overHid {overflow: hidden;}
        .red {background: #f00;}
        .green {background: #0f0;}
        .blue {background: #00f;}
        .margin00{margin:0px;}
        .margin10{margin:10px;}
        .margin20{margin:20px;}
    </style>
</head>

<body>
    <div class="wrapper overHid">
        <div class="big-box blue margin20">non-float</div>
        <!-- 浮动元素添加top定位，无效 -->
        <div class="middle-box green margin20 floatL top20">float left</div>
        <div class="small-box red margin10"></div>
    </div>
</body>

</html>